<template lang="pug">
  .login-wrapper
    #login.login
      .login-desc
        p(v-for="(item, index) in siteTip" :key="index") {{item}}
      .login-container
        .login-form-wrapper(@keyup.enter="loginEnter")
          .logo
            img(:src="logo",:alt="title")
            h1 {{title}}
            h2 {{desc}}
          form.login-form
            label.sr-only(for="login-account") 账号
            .input-group(:class="isFocus===1?'input-group-active':''")
              i.icon.iconfont.icon-account(:class="isFocus===1? 'icon-active' : ''")
              input#login-account.form-control.input-lg(placeholder="账号",v-model="form.username",@focus="focusEvent(1)",@blur="focusEvent(0)")
            label.sr-only(for="login-password") 密码
            .input-group(:class="isFocus===2?'input-group-active':''")
              i.icon.iconfont.icon-password(:class="isFocus===2 ? 'icon-active' : ''")
              input#login-password.form-control.input-lg(type="password",placeholder="密码",v-model="form.password",@focus="focusEvent(2)",@blur="focusEvent(0)")
              //- .checkbox.check-complete(@click="rememberMe")
            //- input#login-remember(type="checkbox",value="remember",v-model="remember")
            //- label
            //-     | 记住密码
            ButtonItem(
              ref="button"
              v-bind="buttonItem")
        .version-wrapper
          .text {{copyright}}
</template>

<script>
import { login } from '@/utils/auth'
import ButtonItem from '@/components/ButtonList/ButtonItem'

import logo from './logo.png'

export default {
  name: 'login',
  components: {
    ButtonItem
  },
  data () {
    const copyright = 2018
    const company = '深圳市拓安信计控仪表有限公司'
    return {
      logo,
      title: '克拉玛依',
      desc: '智慧水务综合管理平台',
      siteTip: ['帮助供水企业进行信息规划与建设', '专注城市供水智慧管理'],
      remember: true,
      copyright: `${copyright} © ${company}`,
      form: {
        username: '',
        password: ''
      },
      isFocus: 0,
      buttonItem: {
        name: 'login',
        label: '登录',
        size: 'lg',
        type: 'complete',
        buttonStyle: {
          width: '100%'
        },
        disabled: this.buttonDisabled,
        func: ({funcProps}) => {
          const { button } = funcProps
          this.login(button)
        }
      }
    }
  },
  computed: {
    buttonDisabled () {
      return this.form.username === '' || this.form.password === ''
    }
  },
  mounted () {
    if (document.getElementById('loading')) {
      document.body.removeChild(document.getElementById('loading'))
    }
  },
  methods: {
    rememberMe () {
      this.remember = !this.remember
    },
    loginEnter () {
      this.login(this.$refs.button)
    },
    login (button) {
      button.loading = true
      if (!this.buttonDisabled) {
        login(this.form.username, this.form.password).then((data) => {
          button.loading = false
          if (data) {
            this.$router.replace('/')
            this.$message({
              message: '登录成功',
              showClose: true,
              type: 'success'
            })
          }
        })
      }
    },
    focusEvent (active) {
      if (active === 0) {
        this.isFocus = false
      } else {
        this.isFocus = active
      }
    }
  }
}
</script>

<style lang="sass" scoped>
h1
  font-size: 34px
h2
  font-size: 30px
  font-weight: 900
.login-wrapper
  position: fixed
  top: 0
  right: 0
  bottom: 0
  left: 0
.login
  display: flex
  flex-direction: column
  background: url(./bg.jpg) no-repeat
  background-size: cover
  height: 100%
  overflow: auto
.login-container
  display: flex
  align-items: center
  justify-content: center
  flex-direction: column
  height: 100%
  padding: 5rem 5rem 2.75rem
  background: rgba(255,255,255,.8)
  position: absolute
  right: 0
  box-shadow: 2px 0 10px #8bc1f2
.login-form-wrapper
  flex: 1 0 auto
  width: 100%
.login-form
  padding: 22px
  .btn-complete.disabled
    background-color: #22a4ff
    border-color: #22a4ff
    opacity: 1
.login-form-submit
  display: block
  width: 100%
  padding: 11px 19px
  font-size: 18px
  border-radius: 4px
#login-password
  margin-top: 12px
.version-wrapper
  text-align: right
  line-height: 1.6
  .version-text
    font-size: 1.2rem
.input-group
  border-bottom: 1px solid #dbdbdb
.input-group-active
  border-bottom: 1px solid #3a9ff2
.form-control
  border: 0
  background: transparent
  border-radius: 0
.form-control:focus
  border: 0
  background: transparent!important
.btn-complete
  margin-top: 20px
.login-desc
  position: absolute
  bottom: 44px
  left: 78px
  color: #fff
  p
    font-size: 20px
.icon-account
  padding-top: 10px
  font-size: 20px
.icon-password
  padding-top: 20px
  font-size: 22px
.icon-active
  color: #3a9ff2
@media (min-width:300px) and (max-width:768px)
  .login-container
    width: 100%
  .login-desc
    display: none
</style>
